<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>站点管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索 -->
        <el-form :inline="true" style="margin-top: 20px;">
            <el-form-item>
                <el-button size="small" @click="exportExcel">导出Excel</el-button>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="name" placeholder="请输入站点名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="detail" placeholder="请输入详细地址"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select size="small" v-model="status" placeholder="请选择站点状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select size="small" v-model="userType" placeholder="请选择是否平台合伙人">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="chongzhi">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table size="small" ref="multipleTable" :data="siteData" element-loading-text="拼命加载中" style="width: 100%;"
            v-horizontal-scroll>
            <el-table-column align="center" sortable type="index" label="序号"></el-table-column>
            <el-table-column align="center" sortable prop="name" label="站点名称" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="state" label="审核状态" :formatter="State"
                width="120"></el-table-column>
            <el-table-column align="center" sortable prop="latitude" label="纬度" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="longitude" label="经度" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="status" label="站点状态" :formatter="Status"
                width="120"></el-table-column>
            <el-table-column align="center" sortable prop="parkCost" label="停车费" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="detail" label="详细地址" width="150"></el-table-column>
            <el-table-column align="center" sortable prop="time" label="营业时间" width="150"></el-table-column>
            <el-table-column align="center" sortable prop="phone" label="电话" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="description" label="收费说明" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="userType" label="是否平台合伙人" :formatter="UserType"
                width="130"></el-table-column>
            <el-table-column align="center" sortable prop="createTime" label="创建时间" width="150">
                <template slot-scope="scope">
                    <div>{{ transformDate(scope.row.createTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" fixed="right" width="300">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="openSite(scope.row)">查看详情</el-button>
                    <el-button size="mini" type="primary" @click="ShenheYes(scope.row)"
                        v-if="scope.row.state === 0">审核通过</el-button>
                    <el-button size="mini" type="danger" @click="ShenheNo(scope.row)"
                        v-if="scope.row.state === 0">审核不通过</el-button>
                    <el-button size="mini" type="info" disabled v-if="scope.row.state === 1">已审核</el-button>
                    <el-button size="mini" type="info" disabled v-if="scope.row.state === 2">已审核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 查看详情 -->
        <el-dialog title="站点详情页：" :visible.sync="editFormDetails">
            <el-form label-width="150px">
                <el-form-item label="站点名称：">
                    <span v-html="this.Details.name"></span>
                </el-form-item>
                <el-form-item label="站点图片集合：">
                    <ul style="display: flex; flex-wrap: wrap;overflow: auto; width: 100%;padding:0;margin:0;">
                        <li v-for="url in urlArr" :key="url" style="width: 140px;margin:3px 0 3px 14px">
                            <el-image v-if="url" style="width: 140px;" :src="url" :preview-src-list="[url]"></el-image>
                        </li>
                    </ul>
                </el-form-item>
                <el-form-item label="纬度：">
                    <span v-html="this.Details.latitude"></span>
                </el-form-item>
                <el-form-item label="经度：">
                    <span v-html="this.Details.longitude"></span>
                </el-form-item>
                <el-form-item label="停车费：">
                    <span v-html="this.Details.parkCost"></span>
                </el-form-item>
                <el-form-item label="详细地址：">
                    <span v-html="this.Details.detail"></span>
                </el-form-item>
                <el-form-item label="营业时间：">
                    <span v-html="this.Details.time"></span>
                </el-form-item>
                <el-form-item label="站点状态：">
                    <span v-if="this.Details.status == 0">开放</span>
                    <span v-if="this.Details.status == 1">休息</span>
                    <span v-if="this.Details.status == 2">故障</span>
                    <span v-if="this.Details.status == 3">认领</span>
                </el-form-item>
                <el-form-item label="电话：">
                    <span v-html="this.Details.phone"></span>
                </el-form-item>
                <el-form-item label="收费说明：">
                    <span v-html="this.Details.description"></span>
                </el-form-item>
                <el-form-item label="创建时间：" prop="createTime">
                    {{ transformDate(this.Details.createTime) }}
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    </div>
</template>

<script>
import {
    getAdminSiteList,
    getAdminSiteInfo,
    aduitSiteInfo
} from "../../api/userMG";
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import Pagination from '../../components/Pagination'
export default {
    data() {
        return {
            siteData: [],
            loading: false,
            name: '',
            status: '',
            detail: '',
            phone: '',
            userType: '',
            options: [{
                value: 0,
                label: '开放'
            }, {
                value: 1,
                label: '休息'
            }, {
                value: 2,
                label: '故障'
            }, {
                value: 3,
                label: '认领'
            }],
            options1: [{
                value: 0,
                label: '普通合伙人'
            }, {
                value: 1,
                label: '平台合伙人'
            }],
            editFormDetails: false,
            Details: [],
            urlArr: [],
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 20,
                total: 10
            },
        }
    },
    // 注册组件
    components: {
        Pagination
    },
    created() {
        this.getdata(Number(localStorage.getItem("sitePage")) || 1);
    },
    methods: {
        // 站点状态
        State: function (row) {
            if (row.state == 0) {
                return "待审核"
            } else if (row.state == 1) {
                return "审核通过 "
            } else if (row.state == 2) {
                return "审核不通过"
            }
        },
        // 审核通过
        ShenheYes(row) {
            this.$confirm("确定通过吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "success",
            }).then(() => {
                let data = {
                    id: row.id,
                    state: 1
                }
                aduitSiteInfo(data).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        localStorage.setItem("sitePage", this.pageparm.currentPage);
                        location.reload()
                    } else {
                        this.$message.error(res.msg)
                    }
                })

            }).catch((err) => {
                this.$message({
                    type: "info",
                    message: "已取消通过",
                });
            });
            return
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {

                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 审核不通过
        ShenheNo(row) {

            this.$confirm("确定不通过吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "error",
            }).then(() => {
                let data = {
                    id: row.id,
                    state: 2
                }
                aduitSiteInfo(data).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        localStorage.setItem("sitePage", this.pageparm.currentPage);
                        location.reload()
                    } else {
                        this.$message.error(res.msg)
                    }
                })

            }).catch((err) => {
                this.$message({
                    type: "info",
                    message: "已取消不通过",
                });
            });
            return
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {

                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 分页插件事件
        callFather(parm) {
            this.pageparm.page = parm.currentPage
            this.getdata(parm.currentPage)
        },
        exportExcel() {
            var parameter = {
                page: -2,
                name: this.name,
                status: this.status,
                detail: this.detail,
                phone: this.phone,
                userType: this.userType
            };
            getAdminSiteList(parameter).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.siteData = res.data.list;
                    return;
                }
            })
            setTimeout(() => {
                //转换成excel时，使用原始的格式
                var xlsxParam = { raw: true };
                let fix = document.querySelector(".el-table__fixed-right");
                let wb;
                //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
                if (fix) {
                    wb = XLSX.utils.table_to_book(
                        this.$refs.multipleTable.$el.removeChild(fix), xlsxParam
                    );
                    this.$refs.multipleTable.$el.appendChild(fix);
                } else {
                    wb = XLSX.utils.table_to_book(this.$refs.multipleTable.$el, xlsxParam);
                }
                var wbout = XLSX.write(wb, {
                    bookType: "xls",
                    bookSST: true,
                    type: "array",
                });
                try {
                    // 如果是IE浏览器，使用Blob通过navigator.msSaveBlob保存
                    if (navigator.msSaveBlob) {
                        navigator.msSaveBlob(new Blob([wbout], { type: 'application/octet-stream' }), '站点列表.xlsx');
                    } else {
                        // 在其他浏览器中使用file-saver保存文件
                        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '站点列表.xlsx');
                    }
                } catch (e) {
                    if (typeof console !== 'undefined') console.log(e, wbout);
                }
                return wbout;
            }, 1000);
            setTimeout(() => {
                this.getdata(1)
            }, 2000);
        },
        // 打开详情页面
        openSite(row) {
            this.loading = true;
            this.editFormDetails = true;
            let data = {
                id: row.id
            }
            getAdminSiteInfo(data).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg
                    });
                } else {
                    this.Details = res.data.data;
                    this.urlArr = this.Details.urls.split(',')
                    return;
                }
            })
        },
        // 是否合伙人
        UserType: function (row) {
            if (row.userType == 0) {
                return "普通合伙人"
            } else if (row.userType == 1) {
                return "平台合伙人"
            }
        },
        // 站点状态
        Status: function (row) {
            if (row.status == 0) {
                return "开放"
            } else if (row.status == 1) {
                return "休息"
            } else if (row.status == 2) {
                return "故障"
            } else if (row.status == 3) {
                return "认领"
            }
        },
        // 搜索数据
        search() {
            this.getdata(1)
        },
        // 重置数据
        chongzhi() {
            this.name = '',
                this.status = '',
                this.detail = '',
                this.phone = '',
                this.userType = '',
                this.getdata(1)
        },
        // 获取数据
        getdata(page) {
            this.loading = true;
            var parameter = {
                page: (page - 1) * 20,
                name: this.name,
                status: this.status,
                detail: this.detail,
                phone: this.phone,
                userType: this.userType
            };
            getAdminSiteList(parameter).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.siteData = res.data.list;
                    this.pageparm.currentPage = page;
                    this.pageparm.total = res.data.count;
                    return;
                }
            })
        },
    }

}
</script>

<style>
li {
    list-style: none;
}
</style>